<template>
    <div class="body">
        <div class="confirm-order">
            <div class="section section-order">
                <div class="order-info clearfix">
                    <div class="fl">
                        <h2 class="title" v-if="isOutTime">订单已超时，请重新下单</h2>
                        <h2 class="title" v-else>订单提交成功！去付款咯～</h2>
                        <p class="order-time">
                            <span>
                                请在
                                <span class="pay-time-tip">0 小时 {{ minutes }} 分</span>
                                <span>内完成支付, 超时后将取消订单</span>
                            </span>
                        </p>
                    </div>
                    <div class="fr">
                        <div class="total">
                            应付总额：
                            <span class="money">
                                <em>{{ Number(totalPrice).toFixed(2) }}</em>
                                <span>元</span>
                            </span>
                        </div>
                        <a class="show-detail" @click="height = height ? 0 : maxHeight">
                            订单详情
                            <i class="iconfont icon-xialajiantouxiao"></i>
                        </a>
                    </div>
                </div>
                <i class="iconfont icon-right"></i>
                <!-- 根据项目条数修改高度以形成过渡效果 -->
                <div class="order-detail" :style="`height:${height}px`">
                    <ul>
                        <li class="clearfix">
                            <div class="label">订单号：</div>
                            <div class="content">
                                <span class="order-num">{{ orderId }}</span>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="label">商品名称：</div>
                            <div class="content" ref="content">
                                <p v-for="(goods,index) in goodsList" :key="goods.goodsId">{{ goods.goodsName }} X {{ goods.number }}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="confirm-pay">
            <div class="section section-payment">
                <div class="cash-title">
                    <div>选择以下支付方式付款</div>
                </div>
                <div class="payment-box">
                    <div class="payment-header clearfix">
                        <h3 class="title">支付工具</h3>
                        <span class="desc"></span>
                    </div>
                    <div class="payment-body">
                        <ul class="clearfix payment-list J_paymentList">
                            <li @click="openMsgBox" alt="weixin_native" type="weixin_native" class="J_bank">
                                <img data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4cdfb179cdce8f95c57e8d82c469d20c.png" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/4cdfb179cdce8f95c57e8d82c469d20c.png" lazy="loaded" />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import QRCode from "qrcode";
export default {
    data() {
        return {
            height: 0,
            minutes: 29,
            timer: 0,
            isOutTime: false,
        };
    },
    mounted() {
        this.getOrder();
    },
    beforeDestroy() {
        // 销毁前记得清除定时器
        clearInterval(this.timer);
    },
    methods: {
        // 获取信息
        async getOrder() {
            try {
                await this.$store.dispatch("pay/getOrder");
                // 设定一个计时器
                this.timer = window.setInterval(() => {
                    if (this.minutes > 1) {
                        this.minutes--;
                    } else {
                        this.isOutTime = true;
                        // 到时间了就清除定时器
                        clearInterval(this.timer);
                    }
                }, 1000 * 60);
            } catch (error) {
                this.$message.error(error);
            }
        },
        // 支付订单
        async payOrder() {
            return await Promise.resolve(
                this.$store.dispatch("pay/payOrder", this.orderId)
            );
        },
        async openMsgBox() {
            if (this.isOutTime) {
                this.$message.info("订单已超时");
                this.$router.replace("/home");
                return;
            }
            // 获取二维码的路径
            let url = await QRCode.toDataURL(
                "wxp://f2f1IZY-mr3-VuTs839ag_97WX7dfe4IrYOZbYy3Fevgpcq8dQMQUbBtUZ5dy-BzecGN"
            );
            // 通过msgbox生成二维码
            this.$msgbox
                .alert(`<img src="${url}" alt="">`, "扫码支付", {
                    dangerouslyUseHTMLString: true,
                    showCancelButton: true,
                    confirmButtonText: "我已支付",
                    cancelButtonText: "取消",
                    showClose: false,
                    center: true,
                    beforeClose: (action, instance, done) => {
                        if (action === "confirm") {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = "查询中...";

                            Promise.resolve(this.payOrder()).then(() => {
                                done();
                                instance.confirmButtonLoading = false;
                                this.$message({
                                    message: "付款成功",
                                    type: "success",
                                });
                                this.$router.replace({
                                    path: "/paysuccess",
                                });
                            });
                        } else {
                            instance.confirmButtonLoading = false;
                            done();
                        }
                    },
                })
                .catch((action) => {
                    this.$message.info("用户取消支付");
                });
        },
    },
    computed: {
        ...mapState("pay", ["goodsList", "totalPrice", "orderId"]),
        maxHeight() {
            return this.goodsList.length * 24 + 106;
        },
    },
};
</script>

<style lang="less" scoped>
.body {
    width: 100%;
    padding: 38px 0 160px;
    box-sizing: border-box;
    min-height: 100vh;

    .confirm-order {
        width: 1200px;
        background-color: #fff;
        margin: 0 auto;

        .section {
            padding: 30px 48px;
            padding-left: 183px;
            position: relative;

            .order-info {
                color: #424242;
                padding: 20px 0;

                .fl {
                    color: #424242;
                    float: left;

                    h2 {
                        color: #424242;
                        margin: 0;
                        padding: 0;
                        margin-bottom: 10px;
                        font-size: 24px;
                        font-weight: 400;
                        line-height: 36px;
                    }

                    p {
                        margin: 0;
                        padding: 0;
                        color: #616161;
                        margin-bottom: 5px;
                        line-height: 2;

                        span {
                            color: #616161;
                            line-height: 2;

                            span {
                                color: #616161;
                                line-height: 2;
                            }
                            .pay-time-tip {
                                line-height: 2;
                                margin: 0 5px;
                                color: #ff6700;
                            }
                        }
                    }
                }

                .fr {
                    color: #424242;
                    float: right;
                    text-align: right;

                    .total {
                        text-align: right;
                        margin-bottom: 30px;
                        color: #757575;

                        span {
                            text-align: right;
                            color: #ff6700;
                            font-size: 14px;
                            em {
                                text-align: right;
                                color: #ff6700;
                                font-size: 24px;
                            }
                        }
                    }

                    .show-detail {
                        text-align: right;
                        background-color: rgba(0, 0, 0, 0);
                        color: #757575;
                        text-decoration: none;
                        cursor: pointer;
                    }

                    .show-detail:hover {
                        color: #ff6700;
                    }
                }
            }
            .icon-right {
                font-family: iconfont !important;
                width: 80px;
                height: 80px;
                position: absolute;
                top: 40px;
                left: 50px;
                font-size: 80px;
                color: #83c44e;
                text-align: center;
                border: 2px solid #83c44e;
                border-radius: 50%;
            }
            .order-detail {
                color: #424242;
                overflow: hidden;
                transition: height 0.3s;

                ul {
                    -webkit-text-size-adjust: 100%;
                    font: 14px/1.5 Helvetica Neue, Helvetica, Arial,
                        Microsoft Yahei, Hiragino Sans GB, Heiti SC,
                        WenQuanYi Micro Hei, sans-serif;
                    color: #424242;
                    list-style: none;
                    padding: 20px 0 0 0;
                    margin-top: 10px;
                    border-top: 1px solid #e0e0e0;

                    li {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        line-height: 24px;
                        margin-bottom: 8px;
                        color: #333;

                        .label {
                            list-style: none;
                            line-height: 24px;
                            color: #333;
                            float: left;
                            width: 85px;
                        }

                        .content {
                            list-style: none;
                            line-height: 24px;
                            color: #333;
                            float: left;
                        }

                        .order-num {
                            -webkit-text-size-adjust: 100%;
                            font: 14px/1.5 Helvetica Neue, Helvetica, Arial,
                                Microsoft Yahei, Hiragino Sans GB, Heiti SC,
                                WenQuanYi Micro Hei, sans-serif;
                            list-style: none;
                            line-height: 24px;
                            color: #ff6700;
                            display: block;
                        }
                    }
                }
            }
        }
    }

    .confirm-pay {
        width: 1200px;
        background-color: #fff;
        margin: 30px auto;
        color: #333;

        .section-payment {
            -webkit-text-size-adjust: 100%;
            font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,
                Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            padding: 30px 48px;
            margin-bottom: 30px;
            background-color: #fff;
            color: #424242;

            .cash-title {
                height: 50px;
                margin-bottom: 30px;
                border-bottom: 1px solid #e0e0e0;
                font-size: 18px;
            }

            .payment-box {
                color: #424242;
                margin-bottom: 30px;

                .payment-header {
                    color: #424242;
                    margin-bottom: 15px;
                }

                .payment-body {
                    color: #424242;

                    ul {
                        color: #424242;
                        padding: 0;
                        overflow: hidden;
                        list-style: none;

                        li {
                            float: left;
                            width: 174px;
                            height: 60px;
                            margin-bottom: 14px;
                            border: 1px solid #e0e0e0;
                            text-align: center;
                            cursor: pointer;
                            overflow: hidden;
                            transition: all 0.4s;
                        }
                    }
                }
            }
        }
    }
}
</style>